<template>
    <div>
    <el-dialog title="部装排序详情" :visible.sync="isShowHtml2Canvas" :fullscreen="true" :before-close="handleClose">
      <div style="width:94vw;margin:auto" ref="downQR">
        <div :class="[kwInfo.CellCount > 200? 'is_scroll':'']">
            <table  v-if="!VerticalRow" style="margin:auto" :class="[Put_Rule_Class]">
                <tr v-for="i in kwInfo.CellRow" :key="i">
                  <!-- :style="{
                        width: tdWidth(kwInfo.CellColumn, kwInfo.CellRow),
                        height: tdHeight(kwInfo.CellColumn, kwInfo.CellRow),
                      }" -->
                    <td 
                    :class="{
                        info: true,
                    }"
                     v-for="t in kwInfo.CellColumn"  
                     :key="t"
                     
                     >
                     <div :class="[Put_Rule_txt_Class, 'h_div']">{{ reId(i, t, "ProductOrder") }}<br>{{ reId(i, t, "SkuId") }}</div>
                     </td>
                </tr>
            </table>
            <div v-else style="display: flex;" :class="[Put_Rule_Class]">
                <div  v-for="i in kwInfo.CellRow" :key="i">
                    <div 
                      v-for="t in kwInfo.CellColumn" 
                      :key="t" 
                      :style="{
                        width: tdWidth(kwInfo.CellColumn, kwInfo.CellRow),
                        height: tdHeight(kwInfo.CellColumn, kwInfo.CellRow),
                      }"      
                      :class="[Put_Rule_txt_Class,'info']">
                      {{ reId(i, t, "ProductOrder") }}<br>{{ reId(i, t, "SkuId") }} 
                    </div>
                </div>
            </div>
        </div>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import html2canvas from 'html2canvas';
export default {
    props: ['ThumbnailList','isShowHtml2Canvas','Put_Rule','VerticalRow', 'kwInfo'],
    data() {
        return {
            // isShowHtml2Canvas: false,
            imgsrc:''
        }
    },
  computed: {
     Put_Rule_Class() {
      return {
        top_right: this.Put_Rule == "top_right",
        top_left: this.Put_Rule == "top_left",
        bottom_left: this.Put_Rule == "bottom_left",
        bottom_right: this.Put_Rule == "bottom_right",
        top_right_v: this.Put_Rule == "top_right_v",
        top_left_v: this.Put_Rule == "top_left_v",
        bottom_left_v: this.Put_Rule == "bottom_left_v",
        bottom_right_v: this.Put_Rule == "bottom_right_v",
      };
    },
    Put_Rule_txt_Class() {
      if(this.Put_Rule == "top_left_v") {
        return "top_left_txt_v"
      }
      if(this.Put_Rule == "bottom_left_v") {
        return "bottom_left_txt_v"
      }
      if(this.Put_Rule == "top_right_v") {
        return "top_right_txt_v"
      }
      if(this.Put_Rule == "bottom_right_v") {
        return "bottom_right_txt_v"
      }
      if(this.Put_Rule == "bottom_left") {
        return "bottom_left"
      }
      if(this.Put_Rule == "top_right") {
        return "top_right"
      }
      if(this.Put_Rule == "bottom_right") {
        return "bottom_right"
      }
    },
    tdWidth() {
      return function (CellRow, CellColumn) {
        let w = 10+ "vw";
        if (CellRow == 1) {
          w = 100 / CellColumn+ "vw";
        } else {
          if (CellColumn > 5) {
            w = 70 / (CellColumn < CellRow ? CellRow : CellColumn)+ "vw";
            // w = 480 / (CellColumn < CellRow ? CellColumn : CellRow) / 4 + "vw";
          } else {
            w = 480 / (CellColumn < CellRow ? CellColumn : CellRow) / 12 + "vw";
          }
        }
        if(this.VerticalRow) {
          // w = 70 / (CellColumn + 1) + "vw";
          w = 100 + 'px'
        }
        // console.log("CellColumn, CellRow tdWidth", CellColumn, CellRow, w, this.VerticalRow);
        return w ;
      };
    },
     tdHeight() {
      return function (CellRow, CellColumn) {
        let h = 10 + "vh";
        if (CellColumn == 1) {
          h = 45 / CellRow + "vh";
        } else {
          // h = 480 / (CellColumn < CellRow ?  CellRow  : CellColumn) / 12 + "vh";
          h = 70 / (CellColumn < CellRow ? CellColumn : CellRow) + "vh";
        }
        if(this.VerticalRow ) {
          h = 80 / CellRow + "vh";
        }
        // console.log("CellColumn, CellRow tdHeight", CellColumn, CellRow, h, this.VerticalRow);
        return h ;
      };
    },
  },
    mounted() {
        // this.isShowHtml2Canvas = this.isShowHtml2Canvas;
    },
    methods:{
    reId(row, col, ProductOrder) {
      let res = "";
      let item = this.ThumbnailList[row - 1][col - 1];
      if (item && item[ProductOrder]) {
        res = item[ProductOrder]
      }
      return res;
    },
      handleClose() {
        this.$emit('dialogClose', false)
      },
    }
}
</script>

<style scoped lang="scss">
/deep/ .el-dialog__body {
  padding: 0;
}
.is_scroll {
  overflow: scroll;
}
.info {
  background: #f5f5f5;
  border: 2px solid #fff;
  box-sizing: border-box;
  white-space: nowrap; 
  text-align: center;
  // min-width: 100px;
  // min-height: 100px;
}
.h_div {
  // min-width: 100px;
  // min-height: 100px;
  // max-width: 130px;
  // max-height: 130px;
}



.top_left_v {
  // transform: rotate(90deg) rotateX(180deg); //左上v
  // transform-origin: 50% 50%;  
}
.top_left_txt_v {
  // transform: rotate(-90deg) rotateY(180deg);//左上v（文字）
}
.top_right_v {
  //右上v
  transform: rotateY(180deg)
}
.top_right_txt_v {
  //右上v（文字）
  transform: rotateY(-180deg)
}
.bottom_left_v {
  //左下v
  transform: rotateX(-180deg);
}
.bottom_left_txt_v {
  //左下v（文字）
  transform: rotateX(180deg);
}
.bottom_right_v {
  transform: rotate(180deg); //右下v
}
.bottom_right_txt_v {
  //右下v（文字）
  transform: rotate(180deg);
}


.top_left {
  transform: rotate(0deg); //左上
}
.bottom_left {
  transform: rotateX(180deg); //左下
}
.top_right {
  transform: rotateY(180deg); //右上
}
.bottom_right {
  transform: rotate(180deg); //右下
}
</style>